import dash
import random
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State, ClientsideFunction

app = dash.Dash(
    __name__,
    external_scripts=[
        'https://fastly.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js'
    ]
)

app.layout = html.Div(
    [
        dcc.Interval(
            id='interval-demo1',
            n_intervals=0,
            interval=1000,
            max_intervals=3
        ),

        dcc.Interval(
            id='interval-demo2',
            n_intervals=0,
            interval=1000,
            max_intervals=3
        ),

        dcc.Store(
            id='store-demo1',
            data={
                'x': [i for i in range(25)],
                'y': [random.random() for i in range(25)]
            }
        ),

        dcc.Store(
            id='store-demo2',
            data={
                'x': [i for i in range(25)],
                'y': [random.random() for i in range(25)]
            }
        ),

        html.Div(
            id='chart-container-demo1',
            style={
                'height': '350px',
                'borderRadius': '10px',
                'padding': '25px',
                'boxShadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017'
            }
        ),

        html.Div(
            id='chart-container-demo2',
            style={
                'height': '350px',
                'borderRadius': '10px',
                'padding': '25px',
                'marginTop': '25px',
                'boxShadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017'
            }
        )
    ],
    style={
        'padding': '50px 100px'
    }
)


@app.callback(
    Output('store-demo1', 'data'),
    Input('interval-demo1', 'n_intervals'),
    State('store-demo1', 'data'),
    prevent_initial_call=True
)
def update_data(n_intervals, data):
    return {
        'x': [*data['x'][1:], max(data['x']) + 1],
        'y': [*data['y'][1:], random.random()]
    }


app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='render_chart1'
    ),
    Output('chart-container-demo1', 'children'),
    Input('store-demo1', 'data')
)


@app.callback(
    Output('store-demo2', 'data'),
    Input('interval-demo2', 'n_intervals'),
    State('store-demo2', 'data'),
    prevent_initial_call=True
)
def update_data(n_intervals, data):
    return {
        'x': [*data['x'][1:], max(data['x']) + 1],
        'y': [*data['y'][1:], random.random()]
    }


app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='render_chart2'
    ),
    Output('chart-container-demo2', 'children'),
    Input('store-demo2', 'data')
)

if __name__ == '__main__':
    app.run_server(debug=False)
